<script setup lang="ts">
import { ref, defineOptions, defineProps, watch, defineEmits } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useColumns } from "./columns";
import { message } from "@/utils/message";
import { clientListColumns } from "./tableContent/clientAdmin/clientListData";
import { blindBoxListColumns } from "./tableContent/blindBoxAdmin/blindBoxListData";
import { shopTypeListColumns } from "./tableContent/shopAdmin/shopTypeListData";
import { shopListColumns } from "./tableContent/shopAdmin/shopListData";
import { agreementListColumns } from "./tableContent/agreementAdmin/agreementListData";
import { buySchemeListColumns } from "./tableContent/blindBoxAdmin/buySchemeListData";
import { blindBoxGoodsListColumns } from "./tableContent/blindBoxAdmin/blindBoxGoodsListData";
import { lotteryRecordListColumns } from "./tableContent/blindBoxAdmin/lotteryRecordListData";
import { giveRecordListColumns } from "./tableContent/blindBoxAdmin/giveRecordListData";
import { capitalRecordListColumns } from "./tableContent/clientAdmin/capitalRecordListData";
import { withdrawRecordListColumns } from "./tableContent/clientAdmin/withdrawRecordListData";
import { userCouponListColumns } from "./tableContent/clientAdmin/userCouponListData";
import { userAddressListColumns } from "./tableContent/clientAdmin/userAddressListData";

defineOptions({
  name: "ReTable"
});
const {
  loading,
  dataList,
  select,
  hideVal,
  tableSize,
  pagination,
  adaptiveConfig,
  loadingConfig,
  getTableType,
  paginationAlign,
  paginationSmall,
  onChange,
  onSizeChange,
  onCurrentChange
} = useColumns();
const props = defineProps({
  type: {
    type: String,
    default: "default"
  },
  createBtnText: {
    type: String,
    default: ""
  },
  deleteBtnText: {
    type: String,
    default: ""
  },
  // 全选审核按钮文本
  allCheckBtnText: {
    type: String,
    default: ""
  },
  // 自定义审核按钮文本
  customCheckBtnText: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["allCheck", "customCheck", "create", "delete"]);
const columns = ref([]);
const refreshColumns = ref(false);
const checkList = ref([]);
const checkedColumns = ref([]);
watch(
  () => props.type,
  async (newVal, oldVal) => {
    columns.value = await getTableType(newVal);
    checkList.value = columns.value.map(item => item.prop);
    refreshColumns.value = true;
    const getShowColumns = () => {
      checkedColumns.value = columns.value.filter((item: any) => {
        return !item.hideCheck;
      });
    };
    getShowColumns();
  },
  {
    immediate: true,
    deep: true
  }
);
const tableColumns = ref([]);
const handleChangeCheck = e => {
  refreshColumns.value = false;
  const predefinedColumns = e;
  // 通用的列隐藏逻辑
  const updateColumnVisibility = columns => {
    columns.forEach(column => {
      column.hide = () =>
        predefinedColumns.includes(column.prop) ? false : true;
    });
  };
  switch (props.type) {
    case "clientList": // 客户列表
      updateColumnVisibility(clientListColumns);
      break;
    case "blindBoxList": // 盲盒列表
      updateColumnVisibility(blindBoxListColumns);
      break;
    case "shopTypeList": // 商品分类列表
      updateColumnVisibility(shopTypeListColumns);
      break;
    case "shopList": // 商品列表
      updateColumnVisibility(shopListColumns);
      break;
    case "agreementList": // 协议列表
      updateColumnVisibility(agreementListColumns);
      break;
    case "buySchemeList": // 购买方案列表
      updateColumnVisibility(buySchemeListColumns);
      break;
    case "blindBoxGoodsList": // 盲盒商品列表
      updateColumnVisibility(blindBoxGoodsListColumns);
      break;
    case "lotteryRecordList": // 抽奖记录列表
      updateColumnVisibility(lotteryRecordListColumns);
      break;
    case "giveRecordList": // 赠送记录列表
      updateColumnVisibility(giveRecordListColumns);
      break;
    case "capitalRecordList": // 资金记录列表
      updateColumnVisibility(capitalRecordListColumns);
      break;
    case "withdrawRecordList": // 提现记录列表
      updateColumnVisibility(withdrawRecordListColumns);
      break;
    case "userCouponList": // 用户优惠券列表
      updateColumnVisibility(userCouponListColumns);
      break;
    case "userAddressList": // 用户地址列表
      updateColumnVisibility(userAddressListColumns);
      break;
  }
  setTimeout(() => {
    refreshColumns.value = true;
  }, 3);
};
// 多选的表格id
const selectedids = ref([]);
const handleSelectionChange = (selection: any) => {
  selectedids.value = selection.map(item => item.id);
};
const handleCreate = () => {
  switch (props.type) {
    case "clientList":
      console.log("添加客户");
      break;
    case "shopTypeList":
      console.log("添加商品分类");
      break;
  }
  emits("create");
};
const handleDelete = () => {
  if (selectedids.value.length === 0) {
    message("请选择需要删除的数据", { customClass: "el", type: "warning" });
    return;
  }
  switch (props.type) {
    case "clientList":
      console.log("删除客户");
      break;
    case "shopTypeList":
      console.log("删除商品分类");
      break;
    case "userCouponList":
      console.log("删除用户优惠券");
      break;
  }
  emits("delete", selectedids.value);
};
// 自定义审核按钮点击事件
const handlAllCheck = () => {
  switch (props.type) {
    case "withdrawRecordList":
      console.log("审核自选id提现");
      if (selectedids.value.length === 0) {
        message("请选择需要审核的数据", { customClass: "el", type: "warning" });
        return;
      }
      emits("allCheck", selectedids.value);
      break;
  }
};
// 自定义审核按钮点击事件
const handleCustomCheck = () => {
  switch (props.type) {
    case "withdrawRecordList":
      console.log("审核全选提现");
      emits("customCheck");
      break;
  }
};
</script>
<template>
  <div class="re-table">
    <el-card shadow="hover">
      <div class="table-operations flex items-center justify-between mb-3">
        <div>
          <el-button
            v-if="props.createBtnText"
            type="primary"
            size="small"
            :icon="useRenderIcon('ep:plus')"
            @click="handleCreate()"
          >
            {{ props.createBtnText }}
          </el-button>
          <el-button
            v-if="props.deleteBtnText"
            type="danger"
            size="small"
            :icon="useRenderIcon('ep:delete')"
            @click="handleDelete()"
          >
            {{ props.deleteBtnText }}
          </el-button>
          <el-button
            v-if="props.allCheckBtnText"
            type="primary"
            size="small"
            :icon="useRenderIcon('tabler:list-check')"
            @click="handlAllCheck()"
          >
            {{ props.allCheckBtnText }}
          </el-button>
          <el-button
            v-if="props.customCheckBtnText"
            type="success"
            size="small"
            :icon="useRenderIcon('gravity-ui:seal-check')"
            @click="handleCustomCheck()"
          >
            {{ props.customCheckBtnText }}
          </el-button>
        </div>
        <div>
          <el-popover placement="left" trigger="click">
            <template #reference>
              <el-button link :icon="useRenderIcon('ep:menu')" />
            </template>
            <el-checkbox-group v-model="checkList" @change="handleChangeCheck">
              <el-checkbox
                v-for="(item, index) in checkedColumns"
                :key="index"
                :label="item.label"
                :value="item.prop"
              />
            </el-checkbox-group>
          </el-popover>
        </div>
      </div>
      <!--      <div>{{ dataList }}</div>-->
      <pure-table
        v-if="refreshColumns"
        border
        adaptive
        :adaptiveConfig="adaptiveConfig"
        row-key="id"
        alignWhole="center"
        stripe
        showOverflowTooltip
        :default-sort="{ prop: 'date', order: 'ascending' }"
        :size="tableSize as any"
        :loading="loading"
        :loading-config="loadingConfig"
        :data="dataList"
        :columns="columns"
        :pagination="pagination"
        @page-size-change="onSizeChange"
        @page-current-change="onCurrentChange"
        @selection-change="handleSelectionChange"
      />
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
//.re-table {
//  :deep(.el-card__body),
//  .el-card {
//    height: 100%;
//  }
//  :deep(.el-card__body) {
//    display: flex;
//    flex-direction: column;
//    .pure-table {
//      flex: 1;
//    }
//  }
//}
</style>
